﻿<!-- 
  ***************************************************************************************************
  * Title: EJScreen Side by Side Comparisons
  * Description: This allows users to compare different map layers for a location on side-by-side maps in a new window.
  * 
  * Author: SAIC, EPA OMS Contractor
  * Creation Date: 01/22/2024
  * Last Updated: 01/22/2024
  ****************************************************************************************************
-->

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" />
    <title>EJScreen Map Comparisons </title>
    <link rel="SHORTCUT ICON" href="images/ej.ico" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/css/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="css/claro/claro.css">

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #909090;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }

        a {
            color: White;
        }

        td,
        th {
            padding: 2px 4px;
        }

        .mapTitle {
            background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
            position: absolute;
            z-index: 50;
            padding: 3px;
            font-size: 10pt;
            color: navy;
            text-align: center;
            /*opacity : 0.7!important;
          filter:alpha(opacity='70')!important;
          -moz-opacity: 0.7!important;   */
        }

        /* override slider styles */
        /* change font-size,height,width for size, line-height adjusts +/- vertically within */

        .esriSimpleSlider div {
            -moz-user-select: none;
            cursor: pointer;
            font-family: verdana, helvetica;
            font-size: 15px;
            height: 20px;
            line-height: 15px;
            width: 20px;
        }

        .esriLegendServiceLabel {
            white-space: nowrap !important;
        }

        /* change border-radius for curve around zoom, 0 = square ends */
        /* added 'background, same background as map title for transparent gray */

        .esriSimpleSlider {
            -moz-user-select: none;
            background-color: #fff;
            border: 1px solid #57585a;
            border-radius: 0px;
            color: #4c4c4c;
            position: absolute;
            text-align: center;
            background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
        }

        /* positions from top right */

        .esriSimpleSliderTR {
            right: 5px;
            top: 5px;
        }

        #header {
            height: 35px;
            width: 100%;
            /*background:#7a7a7a;*/
            color: #fff;
            margin: 0;
            font-size: 26px;
            overflow: hidden;
        }

        #headerText {
            padding-top: 5px;
            padding-left: 25px;
            float: left;
        }

        .transDiv {
            font-size: 8pt;
            text-decoration: underline;
            color: navy;
        }

        .bookmarksTogText {
            position: relative;
            margin: auto;
            margin-left: 2px;
            margin-top: 0px;
            padding: 0px;
            color: #fff;
            font-family: 'open_sansregular', sans-serif;
            cursor: pointer;
        }

        .legendBtn {
            position: absolute;
            float: right;
            color: black;
            padding: 4px 4px 4px 4px;
            cursor: pointer;
            background-color: white;
            font-family: Tahoma;
            z-index: 200;
            opacity: 0.8 !important;
            filter: alpha(opacity='80') !important;
            -moz-opacity: 0.8 !important;
        }

        .legendtitle {
            background-color: #444;
            color: white;
            padding: 4px;
            font-size: 10pt;
            font-weight: bold;
            border: solid 1px #999;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .legendcontent {
            font-size: 9pt;
        }

        .esriPopup {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: 9px !important;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 20px;
        }

        .thresholdBottom {
            margin-bottom: 5px;
            padding: 5px;
        }

        .thresholdBound .dijitDownArrowButton .dijitArrowButtonInner {
            background-position: -36px 53% !important;
        }

        .thresholdBound .dijitUpArrowButton .dijitArrowButtonInner {
            background-position: -141px 53% !important;
        }

        .thresholdBound .dijitSpinnerButtonContainer {
            padding: 0px;
        }

        .thresholdAltColor {
            background-color: #ddd;
        }

        .thresholdOverwrite {
            width: 405px !important;
            margin-left: 40px;
            /* background-color: #ccc;*/
        }

        /*.esriLegendLayerLabel,.esriLegendServiceLabel {
  display: none;
} */
    </style>
    <script>
        var path_location = location.pathname.replace(/\/[^/]+$/, '');
        var dojoConfig = {
            has: {
                "esri-native-promise": true
            },
            parseOnLoad: true,
            packages: [{
                name: "mapdijit",
                location: path_location + '/mapdijit'
            }]
        };
    </script>
    <script src="https://js.arcgis.com/4.19/"></script>
    <script type="text/javascript" src="javascript/config.js"></script>   
    <script language="javascript" type="text/javascript" src="mapdijit/javascript/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="mapdijit/javascript/jquery.colorPicker.js"></script>
    <script type="text/javascript">
        //tests for popup manager
        //var savemap;

        var mapsJson = {
            //"map1": {"btnid": "btn1", "labelid": "lab1","legendid":"legenddiv1","theme":"other","field":"","description":"My Test2","remoteURL":"http://sdc-gis3/arcgis/rest/services/TRI/TRI_Onsite_Releases_l9_l10/MapServer/2"}
            "map1": {
                "btnid": "btn1",
                "labelid": "lab1",
                "legendid": "legenddiv1",
                "theme": "ejindex",
                "field": "B_PTRAF",
                "category": "P_ENV", //category the field belongs to
                "group":"Primary", //config group the field belongs to
                "pcttype": "nation"
            },
            "map2": {
                "btnid": "btn2",
                "labelid": "lab2",
                "legendid": "legenddiv2",
                "theme": "demog",
                "field": "PCT_LOWINC",
                "description": "",
                "customrenderer": {
                    "classnum": "5",
                    "method": "quantile",
                    "colorindex": "2",
                    "linewidth": "1",
                    "linecolor": "#000000",
                    "opacity": "0.5"
                }
            }
            // "map3": {
            //     "btnid": "btn3",
            //     "labelid": "lab3",
            //     "legendid": "legenddiv3",
            //     "theme": "threshold",
            //     "field": "",
            //     "description": "thresholdDes",
            //     "pcttype": "nation",
            //     "customrenderer": {
            //         "classnum": "5",
            //         "method": "quantile",
            //         "colorindex": "2",
            //         "linewidth": "1",
            //         "linecolor": "#000000",
            //         "opacity": "0.5"
            //     }
            // }
            /*,"map2": {"btnid": "btn2", "labelid": "lab2","legendid":"legenddiv2","theme":"other","field":"","description":"Urbanized Areas","remoteURL":"https://map11.epa.gov/arcgis/rest/services/NEPAssist/Boundaries/MapServer/3",
            "customrenderer":{
              "type": "simple",
              "label": "",
              "description": "",
              "symbol": {
                  "type": "esriSFS",
                  "style": "esriSFSSolid",
                  //"color": [115,76,0,255], //brown
                   "color": [255,0,0,255], //red
                  "outline": {
                      "type": "esriSLS",
                      "style": "esriSLSSolid",
                       "color": [110,110,110,255],
                      "width": 1
                   }
              }
            }
         }*/
        }
        require([
            "dojo",
            "dojo/on",
            "dojo/_base/array",
            "dojo/DeferredList",
            "dojo/dom",
            "dojo/dom-style",
            "dojo/query",
            "dijit/TooltipDialog",
            "dojo/dom-construct",
            "esri/config",
            "mapdijit/CompareMaps",
            "mapdijit/sliderItem",
            "dojo/dom-attr",
            "dijit/registry",
            "dojo/domReady!"
        ], function (
            dojo,
            on,
            array,
            DeferredList,
            dom,
            domStyle,
            query,
            TooltipDialog,
            domConstruct,
            esriConfig,
            CompareMaps,
            sliderItem,
            domAttr,
            registry

        ) {


            /*    var field1 = getQueryVariable("field1");
            var field2 = getQueryVariable("field2");
            if ((!(field1)) || (field1 == "")) field1 = "B_PM25_D2";
            if ((!(field2)) || (field2 == "")) field2 = "B_OZONE_D2";
            var theme1 = getQueryVariable("theme1");
            var theme2 = getQueryVariable("theme2");
            if ((!(theme1)) || (theme1 == "")) theme1 = "ejindex";
            if ((!(theme2)) || (theme2 == "")) theme2 = "ejindex";
            mapsJson["map1"].theme = theme1;
            mapsJson["map2"].theme = theme2;
            mapsJson["map1"].field = field1;
            mapsJson["map2"].field = field2;*/

            var titleHight = 30;
            var tablestr = "<table>";
            tablestr = tablestr + "<tr height='" + titleHight + "px' style='background-color: #444'>";
            var rowstr1 = "";
            var rowstr2 = "";
            var rowstr3 = "";
            for (var amapid in mapsJson) {
                rowstr1 = rowstr1 + "<td><span id='" + mapsJson[amapid].btnid + "' class='bookmarksTogText'>Map Data ▼</span></td>";
                rowstr2 = rowstr2 + "<td id='" + mapsJson[amapid].labelid + "' align='center'></td>";
                rowstr3 = rowstr3 + "<td><div id='" + amapid + "' class='mapDiv'></div></td>";
                //on(dojo.byId(mapsJson[amapid].btnid), "click",showDialog);

            }
            tablestr = tablestr + rowstr1 + "</tr>";
            tablestr = tablestr + "<tr height='" + titleHight + "px' style='color:white'>";
            tablestr = tablestr + rowstr2 + "</tr>";
            tablestr = tablestr + "<tr>" + rowstr3 + "</tr>";
            tablestr = tablestr + "</table>";
            dojo.byId("main").innerHTML = tablestr;


            on(window, 'resize', function () {
                window.location.href = window.location.href;
            });

            var padNum = query(".mapDiv").style("padding-left")[0];

            //get window size and account for map paddings, determine size for each map
            var winH = window.innerHeight - (2 * padNum); //each row pad is doubled, top and bottom of each map
            //subtract header and strip
            var headHeight = query('#header').style("height");
            winH = winH - headHeight;


            var rowCut = 2;
            var winW = window.innerWidth - (2 * rowCut * padNum);
            var mapH = winH - titleHight * 2;
            var mapW = winW / rowCut; //use row cutoff number to account for odd numbers

            query(".mapDiv").style("width", (mapW-10) + "px");
            query(".mapDiv").style("height", mapH + "px");
            query(".mapTitle").style("width", (mapW * 0.7) + "px");



            esriConfig.request.proxyUrl = "proxy.ashx"

            esriConfig.request.corsDetection = false;

            var dgwidget = new CompareMaps({
                id: 'comwg'
            }, 'comdiv');
            dgwidget.startup();
            for (var amapid in mapsJson) {
                var lstr = "<span id='" + mapsJson[amapid].legendid + "' class='legendBtn'>Legend ▼</span>";
                //var rightpx = 0;
				var rightpx = 8;
                if (amapid == "map1") {
                    rightpx = mapW+5;
                }
                var ltitleid = amapid + "_legend";
                var transid = amapid + "_tran";
                var dummy = document.createElement("div");
                dummy.id = mapsJson[amapid].legendid;
                dummy.className = "legendBtn";
                dummy.style.right = rightpx + "px";
                dummy.innerHTML = "<div class='legendtitle' id='" + ltitleid + "'>Legend ▼</div><div id='" + amapid + "_legendcontainer' style='display:none;'><div class='legendcontent' id='" + amapid + "_legendcontent'></div><span class='transDiv' id='" + transid + "'>Change Transparency</span></div>";
                dojo.byId(amapid).appendChild(dummy);

                on(dojo.byId(mapsJson[amapid].btnid), "click", showDialog);
                on(dojo.byId(ltitleid), "click", toggleLegend);
                on(dojo.byId(transid), "click", showTrans);

            }

            function showDialog(event) {
                var tg = event.target;
                var mvalue = "map1";
                if (tg.id == "btn1") mvalue = "map1";
                if (tg.id == "btn2") mvalue = "map2";


                if ((mvalue == dojo.byId("ejform").panid.value) && (dojo.byId("theme").style.display == "block")) {
                    dojo.byId("theme").style.display = "none";
                } else {
                    $('#theme').detach().appendTo(tg.parentNode);
                    dojo.byId("theme").style.display = "block";
                    dojo.byId("ejform").panid.value = mvalue;
                    var curtheme = mapsJson[mvalue].theme;
                    //var curtheme;
                    query('input[name="themetype"]').forEach(function (obj) {
                        // if (obj.checked) {
                        //     curtheme = obj.value;
                        // }
                        if (curtheme && obj.value == curtheme) { obj.click(); }
                    });
                }
            }

            function showTrans(event) {
                var tg = event.target;
                var linkid = tg.id;
                var currentmapid = linkid.split("_")[0];
                var cview = null;
                var cservice = null;
                if (dijit.byId("comwg")) {
                    var mapobjects = dijit.byId("comwg").mapArray;
                    for (i = 0; i < mapobjects.length; i++) {
                        if (mapobjects[i].id == currentmapid) {
                            cview = mapobjects[i];
                            var mapids = ["demog_map", "ejindex_map", "other_map", "more_map", "threshold_map"];
                            for (var j = 0; j < mapids.length; j++) {
                                if (cview.map.findLayerById(mapids[j])) {
                                    cservice = cview.map.findLayerById(mapids[j]);
                                }
                            }
                        }
                    }
                }
                if (!cservice.opacity) {
                    cservice.opacity = '0.5';
                }
                var tvalue = 1 - cservice.opacity;

                var htmlFragment = '';

                var tooltipDialog = dijit.byId("transDialog");
                if (!tooltipDialog) {

                    tooltipDialog = new dijit.TooltipDialog({
                        id: 'transDialog',
                        content: htmlFragment,
                        autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
                        refocus: !dojo.isIE,
                        style: "position: absolute; left:0px; top: 10px; border-width: 0;  font-size: 8pt; font-family: Tahoma; width: 210px; height: 100px; z-index:100;"
                    });

                    var swidget = new sliderItem({
                        servicelayer: cservice,
                        opcvalue: tvalue,
                        dialog: tooltipDialog
                    });

                    //alert(widget.domNode.innerHTML);
                    swidget.placeAt(tooltipDialog.containerNode);

                    // DISPLAY TOOLTIP DIALOG AROUND THE CLICKED ELEMENT
                    dijit.popup.open({
                        popup: tooltipDialog,
                        around: tg
                    });
                    tooltipDialog.opened_ = true;
                    tooltipDialog.sliderid = currentmapid;
                } else {
                    if ((tooltipDialog.opened_) && (tooltipDialog.sliderid == currentmapid)) {
                        dijit.popup.close(tooltipDialog);
                        tooltipDialog.opened_ = false;
                        //node.innerHTML = "Show slider below me";
                    } else {
                        //tooltipDialog.setContent(htmlFragment);
                        var swidget = new sliderItem({
                            servicelayer: cservice,
                            opcvalue: tvalue,
                            dialog: tooltipDialog
                        });
                        dojo.empty(tooltipDialog.containerNode)
                        swidget.placeAt(tooltipDialog.containerNode);
                        dijit.popup.open({
                            popup: tooltipDialog,
                            around: tg
                        });
                        tooltipDialog.opened_ = true;
                        tooltipDialog.sliderid = currentmapid;

                    }
                }

            }

            function toggleLegend(e) {
                var tg = e.target;
                var tid = tg.id;
                var lid = tid.split("_")[0];
                var conid = lid + "_legendcontainer";
                if (dojo.byId(conid).style.display == "block") {
                    dojo.byId(conid).style.display = "none";
                    if (dijit.byId("transDialog")) {
                        var tooltipDialog = dijit.byId("transDialog");
                        if ((tooltipDialog.opened_) && (tooltipDialog.sliderid == lid)) {
                            dijit.popup.close(tooltipDialog);
                            tooltipDialog.opened_ = false;
                        }
                    }
                } else {
                    dojo.byId(conid).style.display = "block";
                }

            }

        });
    </script>
</head>

<body class="claro">
    <div id="header">
        <table>
            <tr>
                <td>
                    <img id="titleLogo" src="images/epa_logo_white.png" alt="EPA log" width="72px" height="20px">
                </td>
                <td valign="top">EJScreen
                    <span style="font-size: 16px;">&nbsp;&nbsp;Map Comparisons</span>
                </td>
            </tr>
        </table>

    </div>


    <div id="main" style="position: absolute;width: 100%;height:100%">
    </div>
    <div id="theme"
        style="position: absolute; display:none;color: black; font-size: 10pt; background-color: white; z-index:200; padding: 4px 4px 4px 4px;">
        <div id="comdiv"></div>
    </div>

</body>

</html>